<template>
  <div style="height: 100%">
    <div class="shift-table" v-if="page == 'table'">
      <el-row type="flex" justify="end">
        <el-button
          size="small"
          type="primary"
          icon="el-icon-circle-plus-outline"
          @click="dialogVisible = true"
          >新增轮班</el-button
        >
        <el-button size="small">批量导入/导出</el-button>
        <el-button
          size="small"
          type="danger"
          class="danger-btn"
          @click="mulDelShift"
          >删除轮班</el-button
        >
      </el-row>
      <div class="common-table" ref="table" style="margin-top: 15px">
        <el-table
          ref="shiftTable"
          :data="tableData"
          style="width: 100%"
          :max-height="tableHeight"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column
            prop="bh"
            label="轮班编号"
            min-width="15%"
            align="center"
            show-overflow-tooltip
          >
            <div
              slot-scope="{ row }"
              style="color: #2c67f6; text-overflow: ellipsis; overflow: hidden"
            >
              {{ row.bh }}
            </div>
          </el-table-column>
          <el-table-column
            prop="org"
            label="组织"
            min-width="10%"
            align="center"
          />
          <el-table-column
            prop="cj"
            label="车间"
            min-width="10%"
            align="center"
          />
          <el-table-column
            prop="gongxu"
            label="工序"
            min-width="10%"
            align="center"
          />
          <el-table-column label="起始班次" min-width="10%" align="center">
            <template slot-scope="{ row }">
              <el-tag
                v-if="row.bcInit == '甲班'"
                size="mini"
                class="table-tag"
                >{{ row.bcInit }}</el-tag
              >
              <el-tag
                v-else
                size="mini"
                class="table-tag"
                color="#E9D1FF"
                style="color: #7100d5"
                >{{ row.bcInit }}</el-tag
              >
            </template>
          </el-table-column>
          <el-table-column
            prop="shiftType"
            label="班制"
            min-width="10%"
            align="center"
          />
          <el-table-column
            prop="executionTime"
            label="执行时间"
            min-width="20%"
            align="center"
          ></el-table-column>
          <el-table-column prop="dcg" label="操作" width="120" align="center">
            <template slot-scope="{ row }">
              <el-button
                type="text"
                icon="el-icon-edit-outline"
                size="small"
                style="padding: 0"
                @click="goPage('detail', row)"
                >编辑</el-button
              >
              <el-button
                type="text"
                icon="el-icon-delete"
                class="danger"
                style="padding: 0"
                size="small"
                @click="delShift(row.id)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="common-pagination">
        <el-pagination
          background
          layout="prev, pager, next, sizes, jumper"
          :page-size="search.size"
          :current-page.sync="search.page"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </div>
      <el-dialog
        custom-class="common-dialog"
        :visible.sync="dialogVisible"
        width="780px"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        title="新增轮班"
        destroy-on-close
        center
        @close="closeDialog"
      >
        <el-form
          ref="addForm"
          :model="form"
          label-width="120px"
          :rules="rules"
          hide-required-asterisk
        >
          <el-row type="flex">
            <el-col :span="12">
              <el-form-item label="组织" size="small" prop="org">
                <el-select v-model="form.org">
                  <el-option
                    v-for="item in orgOption"
                    :key="item.id"
                    :label="item['key_value']"
                    :value="item['key_value']"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="工序" size="small" prop="gongxu">
                <el-select v-model="form.gongxu">
                  <el-option
                    v-for="item in gxOption"
                    :key="item.id"
                    :label="item['key_value']"
                    :value="item['key_value']"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="班制" size="small" prop="shiftType">
                <el-select v-model="form.shiftType">
                  <el-option
                    v-for="item in bzOption"
                    :key="item.id"
                    :label="item['shiftType']"
                    :value="item['shiftType']"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="设定结束时间" prop="endTime">
                <el-date-picker
                  size="small"
                  v-model="form.endTime"
                  type="date"
                  placeholder="选择日期"
                  value-format="yyyy-MM-dd"
                  :picker-options="pickerOptions"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="车间" size="small" prop="cj">
                <el-select v-model="form.cj">
                  <el-option
                    v-for="item in cjOption"
                    :key="item.id"
                    :label="item['key_value']"
                    :value="item['key_value']"
                  />
                </el-select> </el-form-item
              ><el-form-item label="起始班次" size="small" prop="bcInit">
                <el-select v-model="form.bcInit">
                  <el-option
                    v-for="item in bcOption"
                    :key="item.id"
                    :label="item['key_value']"
                    :value="item['key_value']"
                  />
                </el-select> </el-form-item
              ><el-form-item label="设定开始时间" prop="startTime">
                <el-date-picker
                  size="small"
                  v-model="form.startTime"
                  type="date"
                  placeholder="选择日期"
                  value-format="yyyy-MM-dd"
                  :picker-options="pickerOptions1"
                >
                </el-date-picker> </el-form-item
            ></el-col>
          </el-row>
        </el-form>
        <div class="btn-list">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addShift">确定</el-button>
        </div>
      </el-dialog>
    </div>
    <shift-detail v-else ref="detail" :bzOption="bzOption" @goPage="goPage" />
  </div>
</template>

<script>
import { getClass, addShift, getShift, delShift } from '@/api/shifts';
import ShiftDetail from '../ShiftDetail.vue';
import moment from 'moment';
export default {
  props: ['query'],
  components: { ShiftDetail },
  data() {
    return {
      tableHeight: 200,
      page: 'table',
      search: {
        size: 10,
        page: 1
      },
      total: 0,
      tableData: [],
      dialogVisible: false,
      bzOption: [],
      form: {
        bcInit: '',
        cj: '',
        endTime: '',
        gongxu: '',
        org: '',
        shiftType: '',
        startTime: ''
      },
      record: {},
      rules: {
        cj: [{ required: true, message: '请选择车间', trigger: 'change' }],
        org: [{ required: true, message: '请选择组织', trigger: 'change' }],
        gongxu: [{ required: true, message: '请选择工序', trigger: 'change' }],
        bcInit: [
          { required: true, message: '请选择起始班次', trigger: 'change' }
        ],
        shiftType: [
          { required: true, message: '请选择班制', trigger: 'change' }
        ],
        startTime: [
          { required: true, message: '请选择起始时间', trigger: 'change' }
        ],
        endTime: [
          { required: true, message: '请选择结束时间', trigger: 'change' }
        ]
      },
      pickerOptions: {
        disabledDate: time => {
          if (this.form.startTime) {
            return time.getTime() < new Date(this.form.startTime).getTime();
          }
        }
      },
      pickerOptions1: {
        disabledDate: time => {
          if (this.form.endTime) {
            let date = moment(this.form.endTime).valueOf();
            return time.getTime() >= date;
          }
        }
      }
    };
  },
  computed: {
    cjOption() {
      return this.$store.getters.cjOption;
    },
    orgOption() {
      return this.$store.getters.orgOption;
    },
    gxOption() {
      return this.$store.getters.gxOption;
    },
    bcOption() {
      return this.$store.getters.bcOption;
    }
  },
  created() {
    this.getTableData();
    this.getClass();
  },
  mounted() {
    this.$nextTick(() => {
      this.getHeight();
    });
  },
  methods: {
    getHeight() {
      this.tableHeight = this.$refs.table.offsetHeight;
    },
    async getTableData(page) {
      if (page) {
        this.search.page = 1;
      }
      let param = Object.assign(this.search, this.query);
      const res = await getShift(param);
      if (res.code == 1) {
        let { data } = res;
        this.tableData = data.records;
      }
    },
    async getClass() {
      const res = await getClass();
      if (res.code == 1) {
        this.bzOption = res.data;
      }
    },
    addShift() {
      this.$refs['addForm'].validate(async valid => {
        if (valid) {
          const res = await addShift(this.form);
          if (res.code == 1) {
            this.$message({
              message: '新增成功',
              iconClass: 'el-icon-success',
              customClass: 'common-message'
            });
            this.getTableData();
            this.dialogVisible = false;
          }
        } else {
          return false;
        }
      });
    },
    delShift(id) {
      this.$confirm('是否确认删除该班制?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await delShift({ idList: [id] });
        if (res.code == 1) {
          this.$message({
            message: '删除成功',
            iconClass: 'el-icon-success',
            customClass: 'common-message'
          });
          this.getTableData(1);
        }
      });
    },
    mulDelShift() {
      let ids = [];
      let selection = this.$refs.shiftTable.selection;
      if (selection.length > 0) {
        selection.map(item => {
          ids.push(item.id);
        });
      } else {
        this.$message({
          message: '请选择需要删除的班制',
          iconClass: 'el-icon-warning',
          customClass: 'common-message'
        });
        return;
      }
      this.$confirm('是否确认批量删除该班制?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await delShift({ idList: ids });
        if (res.code == 1) {
          this.$message({
            message: '删除成功',
            iconClass: 'el-icon-success',
            customClass: 'common-message'
          });
          this.getTableData(1);
        }
      });
    },
    closeDialog() {
      this.form = {};
    },
    goPage(page, record) {
      this.page = page;
      this.$nextTick(() => {
        if (record) {
          this.$refs.detail.show(record);
        } else {
          this.getTableData(1);
        }
      });
    },
    handleSizeChange(val) {
      this.search.page = 1;
      this.search.size = val;
      this.getTableData();
    },
    handleCurrentChange(val) {
      this.search.page = val;
      this.getTableData();
    }
  }
};
</script>

<style lang="scss">
.shift-table {
  height: 100%;
}
</style>
